<%--
  Created by IntelliJ IDEA.
  User: 谢兴鑫
  Date: 2022/5/12
  Time: 下午 02:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>信息表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/ajaxForm.js"></script>


    <script>


        layui.use(['table', 'util', 'jquery', 'layer', 'laypage'], function () {
            var table = layui.table, util = layui.util, $ = layui.jquery, layer = layui.layer, form = layui.form,
                laypage = layui.laypage;
            //表格渲染
            form.verify({
                num_sz:[
                    /(^$)|^\d+$/,
                    '请填写数字！'
                ],
            });


            var tabStaff = table.render({
                elem: '#tableData'//指定原始表格元素选择器（推荐id选择器）
                , cols: [[//表头
                    // {type: 'checkbox', align: "center", fixed: "left", style: "height:50px;"},
                    {field: 'holidayId', title: '编号', sort: true, align: 'center'},
                    {field: 'stuname', title: '姓名', sort: true, align: 'center'},
                    {field: 'holidayDay', title: '天数', sort: true, align: 'center'},
                    {
                        field: 'startTime', title: '开始时间', sort: true, align: 'center', templet: function (d) {
                            return util.toDateString(d.startTime, 'yyyy年MM月dd日')
                        }
                    },
                    {
                        field: 'endTime', title: '结束时间', sort: true, align: 'center', templet: function (d) {
                            return util.toDateString(d.endTime, 'yyyy年MM月dd日')
                        }
                    },
                    {field: 'title', title: '为何请假', sort: true, align: 'center'},
                    {field: 'remark', title: '状态', sort: true, align: 'center'},
                    {
                        field: 'status', title: '备注', sort: true, align: 'center', templet: function (d) {
                            var status = d.status;
                            if (status == 1) {
                                return "审批中";
                            } else if (status == 3) {
                                return "审批未通过";
                            } else if (status == 2) {
                                return "审批完毕";
                            }
                        }
                    },
                    {fixed: "right", align: '备注', toolbar: '#barDemo', title: '操作'}
                ]],
                url: '${pageContext.request.contextPath}/holidaystudent/selectAllStuFillin',
                method: 'post', //post请求
                page: true, //开启显示分页
                limits: [5, 10, 15, 20], //切换的每页行数
                limit: 5, //默认的每页行数
                loading: true, //数据加载效果开启
            });

            table.on('tool(demo)', function (res) {//注：tool是工具事件名，demo是table原始容器的属性是lay-filter=‘对应的值’
                var row = res.data;//获取当前行数据
                var event = res.event;//获取lay-event 对应的值
                var holidayId = row.holidayId;//获取员工编号
                //alert(holidayId);
                if (event == 'del') {
                    //询问框
                    layer.confirm('是否确定删除该学生请假信息？', {
                        btn: ['是', '否']//按钮
                    }, function () {
                        $.post("${pageContext.request.contextPath}/holidaystudent/deleteHolidayStudent", {holidayId: holidayId}, function (data) {
                            layer.msg("删除成功！", {icon: 6});//使用消息层，显示删除的结果。
                            //重新加载数据
                            tabStaff.reload({
                                url: '${pageContext.request.contextPath}/holidaystudent/selectAllStuFillin'
                            }, "json");

                        });
                    });

                } else if (event == 'edit') {//如果点击了修改按钮
                    layer.open({
                        type: 2, //设置为iframe层
                        fix: false, //不固定
                        maxmin: true,//出现最大化最小化按钮
                        offset: '5px',//垂直水平位置
                        shade: 0.4, //遮罩层透明度
                        area: ['560px', '400px'], //弹出层宽度高度
                        title: "查看学生请假信息", //弹出层标题
                        content: '${pageContext.servletContext.contextPath}/holidaystudent/goLookHolidayStudentContent/' + holidayId //弹出层内网页
                    });
                }

            });

            //我的任务
            $('#my-task').on("click", function () {
                layer.open({
                    type: 2, //设置为iframe层
                    fix: false, //不固定
                    maxmin: true,//出现最大化最小化按钮
                    offset: '5px',//垂直水平位置
                    shade: 0.4, //遮罩层透明度
                    area: ['950px', '500px'], //弹出层宽度高度
                    title: "我的审批任务", //弹出层标题
                    content: '${pageContext.servletContext.contextPath}/holidaystudent/stumyTask' //弹出层内网页
                });
            });

            //监听form表单数据
            form.on('submit(search-btn)', function (d) {
                var holidayId = $("#holidayId").val();
                var stuname = $("#stuname").val();
                //alert(holidayId
                table.reload('tableData', {//指定条件重载table
                    page: {curr: 1},
                    where: { //条件
                        holidayId: holidayId,
                        stuname: stuname,
                    }
                });
            });

            //监听form表单提交  模糊查询  查看全部按钮
            form.on('submit(flush-btn)',function (d) {
                location.reload("tableData");//重新加载父页面表格
            });

        });
    </script>

</head>
<body>

<div>
    <form class="layui-form" action="${pageContext.request.contextPath}">
        <div class="layui-inline">编号</div>
        <div class="layui-inline">
            <input type="text" id="holidayId" name="holidayId" lay-verify="num_sz" class="layui-input"/>
        </div>
        <div class="layui-inline">姓名</div>
        <div class="layui-inline">
            <input type="text" id="stuname" name="stuname" class="layui-input"/>
        </div>
        <a class="layui-btn" lay-filter="search-btn" lay-submit lay-size="sm"><i class="layui-icon"
                                                                                 style="font-size: 13px;"
        >&#xe615;搜索</i></a>
    </form>
</div>

<div class="layui-card-header">
    <a href="#">
        <button class="layui-btn layui-btn-sm"><i class="layui-icon" id="my-task"
                                                  style=" font-size: 15px; top: 200px ">&#xe656;任务</i>
        </button>
    </a>
    <a href="#" lay-filter="flush-btn"  lay-submit>
        <button class="layui-btn layui-btn-sm"><i class="layui-icon"
                                                  style=" font-size: 15px; top: 200px ">&#xe669;刷新</i>
        </button>
    </a>
</div>
<table class="layui-table" lay-size="sm" id="tableData" lay-filter="demo"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
</script>
<%--定义日期模板--%>

</body>
</html>
